<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios 创建对象发送请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  </head>
  <body>
    <button>点击获取段子</button>
    <button>点击获取英雄</button>
    <button>本地server</button>
    <button>本地server</button>
    <!-- 
      接口1: http://api.xiaohigh.com/lol
      接口2: http://api.xiaohigh.com/duanzi

      接口3: http://127.0.0.1:3000/movie
      接口4: http://127.0.0.1:3000/book
    -->

    <script>
        let btns = document.querySelectorAll('button')

        // axois.defaults.baseURL = 'http://api.xiaohigh.com' //全局配置
        // axios.create() 方法返回一个类似axios的对象，能调用axios的所有方法
        let axios1 =  axios.create({
          baseURL:'http://api.xiaohigh.com',
          timeout:2*1000
        })
        let axios2 =  axios.create({
          baseURL:'http://127.0.0.1:3000',
          timeout:2*1000
        })

        btns[0].onclick = async function(){
         let result = await axios1({
            url:'/lol',
            method:'get'
          })
          console.log(result)
        }
        btns[1].onclick = async function(){
         let result = await axios1({
            url:'/duanzi',
            method:'get'
          })
          console.log(result)
        }
        btns[2].onclick = async function(){
         let result = await axios2({
            url:'/movie',
            method:'get'
          })
          console.log(result)
        }
        btns[3].onclick = async function(){
         let result = await axios2({
            url:'/book',
            method:'get'
          })
          console.log(result)
        }
    </script>
  </body>
</html>
